<template>
  <view class="power-use-continer">
    <view class="top-title">
      <text class="icon">
        <text class="iconfont icon-lightning"></text>
      </text>
      <text>用电功率</text>
      <text class="num">
        <text style="margin-right:10rpx;">--</text>
        <text>W</text>
      </text>
    </view>
    <view class="bottom-data">
      <view class="left">
        <view class="first">
          <view>当日用电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
        <view class="second">
          <view>当年用电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">MWh</text>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="first">
          <view>当月用电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">kWh</text>
          </view>
        </view>
        <view class="second">
          <view>累计用电量</view>
          <view>
            <text class="integer">--</text>
            <text class="unit">MWh</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
</script>

<style lang="scss" scoped>
  .integer {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
  }
  
  .decimal {
    font-size: 24rpx;
  
  }
  
  .unit {
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .power-use-continer{
    height: 100%;
    padding: 20rpx;
    .top-title{
      height: 15%;
      display:flex;
      align-items: center;
      font-size: 28rpx;
      .num{
        font-weight: 500;
        font-size:32rpx;
        color: #000;
        margin-left: 20rpx;
      }
      .icon{
        background-color: #f8e1de;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: inline-block;
        margin-right: 20rpx;
        text-align: center;
        line-height: 80rpx;
        .iconfont{
          color: #e56d5e;
          font-size: 60rpx;
        }
      }
    }
    .bottom-data{
      background-color: #f7f7f7;
      display: flex;
      justify-content: space-between;
      padding:20rpx 40rpx;
      margin-top: 20rpx;
      font-size: 28rpx;
      .left{
        flex:1;
        text-align: left;
      }
      .right{
        flex:1;
        text-align: left;
      }
      .first{
        margin-bottom: 40rpx;
      }
    }
  }

</style>